<template>
  <div class="template">
    <div class="main pt24 pb24 pr24">
      <div class="main-inner">
        <el-tabs v-model="active" type="card" @tab-click="" @tab-click="switchActive(active)">
          <el-tab-pane label="我申请的" name="1">
            <div class="my-apply">
              <ul class="top">
                <li class="title">任务名称</li>
                <li class="user">审核人</li>
                <li class="result">审批结果</li>
                <li class="time">申请延期时间</li>
              </ul>
              <vuescroll :ops="ops">
                <div class="content">
                  <ul v-if="my_apply_list.length>0" class="row" v-for="(item,index) in my_apply_list" :key="index">
                    <li class="title"><i></i>{{item.taskName}}</li>
                    <li class="user">{{item.distributeName}}</li>
                    <li class="result">
                      <span v-if="item.delayInfo.approveStatus==1">待审核</span>
                      <span v-if="item.delayInfo.approveStatus==2">通过</span>
                      <span v-if="item.delayInfo.approveStatus==3">不通过</span>
                      <span v-if="item.delayInfo.approveStatus==4">作废</span>
                    </li>
                    <li class="time">从{{item.taskType2==2?new Date(item.delayInfo.oldLimitTime).Format('yyyy-MM-dd hh:mm'):new Date(item.delayInfo.oldLimitTime).Format('yyyy-MM-dd')}}  延至
                      {{item.taskType2==2?new Date(item.delayInfo.delayLimitTime).Format('yyyy-MM-dd hh:mm'):new Date(item.delayInfo.delayLimitTime).Format('yyyy-MM-dd')}}</li>
                  </ul>
                  <div v-if="my_apply_list.length==0" class="default-page">
                    <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                    <p>暂无数据</p>
                  </div>
                </div>
              </vuescroll>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我审批的" name="2">
            <div class="my-approval">
              <div class="top">
                <li class="title">任务名称</li>
                <li class="user">审核人</li>
                <li class="time">申请延期时间</li>
                <li class="result">审批结果</li>
              </div>
              <vuescroll :ops="ops">
                <div class="content">
                  <ul v-if="my_approval_list.length>0" class="row" v-for="(item ,index) in my_approval_list" :key="index">
                    <li class="title"><i></i>{{item.taskName}}</li>
                    <li class="user">{{item.distributeName}}</li>
<!--                    <li class="time">从{{item.delayInfo.oldLimitTime}} 延至{{item.delayInfo.delayLimitTime}}</li>-->
                    <li class="time">从{{item.taskType2==2?new Date(item.delayInfo.oldLimitTime).Format('yyyy-MM-dd hh:mm'):new Date(item.delayInfo.oldLimitTime).Format('yyyy-MM-dd')}}  延至
                      {{item.taskType2==2?new Date(item.delayInfo.delayLimitTime).Format('yyyy-MM-dd hh:mm'):new Date(item.delayInfo.delayLimitTime).Format('yyyy-MM-dd')}}</li>
                    <li class="result">
                      <span class="approval-have-btn" v-if="item.delayInfo.approveStatus==2">通过</span>
                      <span class="approval-have-btn" v-if="item.delayInfo.approveStatus==3">不通过</span>
                      <span class="approval-have-btn" v-if="item.delayInfo.approveStatus==4">作废</span>
                      <span class="approval-btn" v-if="item.delayInfo.approveStatus==1" @click="openApproval(item)">审批</span>
                    </li>
                  </ul>
                  <div v-if="my_approval_list.length==0" class="default-page">
                    <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
                    <p>暂无数据</p>
                  </div>
                </div>
              </vuescroll>
            </div>
          </el-tab-pane>
        </el-tabs>
        <loading v-if="is_show_loading"></loading>
      </div>

    </div>
    <!--    审核框-->
    <div v-if="is_show_approval">
        <taskApproval @close="close_approval" :data="approval_task" @update="update"></taskApproval>
    </div>
    <!--    审核框-->
  </div>
</template>

<script>
  import taskApproval from '@/components/taskDetails/approval'
  import vuescroll from 'vuescroll'
  import loading from '@/components/loading'

  export default {
    name: "DelayApplyList",
    components: {
      vuescroll, taskApproval,loading
    },
    data() {
      return {
        is_show_loading:true,
        is_show_approval: false,//是否显示审核框
        active: '1',//1 我申请的 2 我审批的
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '60px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '5px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        my_apply_list: [],//我申请的延期列表,
        my_approval_list:[],//我审核的延期列表
        approval_task:{},//待审核的数据
      }
    },
    created() {
      //查询我申请的延期（我指派的）
      this.queryTaskList(false);
    },
    methods: {
      update(){
        this.queryTaskList(true);
      },
      //查询任务列表（我申请的延期 false,，我审批的延期 true）
      queryTaskList(_self) {
        let params = {
          pageNum: 1,
          pageSize: 999,
          userId: this.$store.state.userInfo.userId,
          delay: true,
          self:_self,//_self:true 我的任务 审批，false：我指派的 我申请的
        };
        params.flag = 3;//1为今日任务 2为未来任务 3全部任务
        this.$http.get('task/task/query/view', {params: params}).then(res => {
          if (res.statusCode == 200) {
            if(_self){
              this.my_approval_list = res.data.list;
            }else {
              this.my_apply_list = res.data.list;
            }
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      //关闭审核弹框
      close_approval(){
        this.is_show_approval=false;
      },
      //切换
      switchActive(type){
        this.queryTaskList(type==2?true:false);
        // if(type==1){
        //   // 1 我申请的
        //   this.queryTaskList(false);
        // }else if(type==2){
        //   // 2 我审批的
        //   this.queryTaskList(true);
        // }
      },
      //打开审核框
      openApproval(data){
        this.is_show_approval=true;
        this.approval_task=data;
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .template {
    width: 100%;
    height: 100%;
    position: relative;
    > .main {
      width: 100%;
      height: 100%;

      .main-inner {
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-radius: 6px;
        box-sizing: border-box;
        padding: 24px 32px;
        position: relative;
        .my-apply {
          padding-top: 32px;

          .top {
            display: flex;
            background-color: #F2F6F9;
            line-height: 49px;
            height: 49px;
            font-size: 14px;
            color: #96A2AA;
            border-radius: 6px;

            > li {
              text-align: center;
            }

            .title {
              width: 380px;
            }

            .user {
              width: 125px;
            }

            .result {
              width: 145px;
            }

            .time {
              flex: 1;
            }
          }

          .content {
            height: 600px;

            .row {
              display: flex;
              line-height: 54px;
              border-bottom: 1px solid #EEEEEE;
              font-size: 14px;
              color: #454A55;

              > li {
                text-align: center;
              }

              .title {
                width: 380px;
                text-indent: 37px;
                text-align: left;
                position: relative;

                i {
                  position: absolute;
                  width: 12px;
                  height: 16px;
                  left: 10px;
                  top: 19px;
                  /*border: 1px solid #dddddd;*/
                  background-image: url("../../../assets/img/task/ic_file.png");
                }
              }

              .user {
                width: 125px;
              }

              .result {
                width: 145px;
              }

              .time {
                flex: 1;
              }
            }
          }
        }

        .my-approval {
          padding-top: 32px;

          .top {
            display: flex;
            background-color: #F2F6F9;
            line-height: 49px;
            height: 49px;
            font-size: 14px;
            color: #96A2AA;
            border-radius: 6px;

            > li {
              text-align: center;
            }

            .title {
              width: 380px;
            }

            .user {
              width: 125px;
            }

            .result {
              width: 180px;
            }

            .time {
              flex: 1;
            }
          }

          .content {
            height: 600px;

            .row {
              display: flex;
              line-height: 54px;
              border-bottom: 1px solid #EEEEEE;
              font-size: 14px;
              color: #454A55;

              > li {
                text-align: center;
              }

              .title {
                width: 380px;
                text-indent: 37px;
                text-align: left;
                position: relative;

                i {
                  position: absolute;
                  width: 12px;
                  height: 16px;
                  left: 10px;
                  top: 19px;
                  background-image: url("../../../assets/img/task/ic_file.png");
                }
              }

              .user {
                width: 125px;
              }

              .result {
                width: 180px;

                > span {
                  display: inline-block;
                  width: 64px;
                  line-height: 32px;
                  height: 32px;
                  text-align: center;
                  border-radius: 6px;
                }

                .approval-have-btn {
                  background: none;
                  color: #96A2AA;
                }

                .approval-btn {
                  background-color: #0A52E4;
                  color: #ffffff;
                  cursor: pointer;
                }
              }

              .time {
                flex: 1;
              }
            }
          }
        }
      }
    }
    .default-page{
      text-align: center;
      margin-top: 80px;
      img{
        display: inline-block;
      }
      p{
        font-size: 14px;
        color: #96A2AA;
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .template {
    .el-tabs__item {
      color: #96A2AA;
    }

    .el-tabs__item.is-active {
      color: #454A55;
    }
  }

</style>
